<template>
  <div class="container">
    <div class="box-card">
      <el-card class="card1">
        <div slot="header" class="clearfix">
          <router-link :to="{path:'../UserManagement/User'}">用户管理</router-link>
        </div>
        <div>
          <a href="../UserManagement/User">  <img :src="user" alt="" /></a>
        
        </div>
      </el-card>
      <el-card class="card2">
        <div slot="header" class="clearfix">
           <router-link :to="{path:'../AdministratorManagement/Administrator'}">管理员管理</router-link>
        </div>
        <div>
          <a href="../AdministratorManagement/Administrator"><img :src="admin" alt="" /></a>
          
        </div>
      </el-card>
    </div>
    <div class="box-card">
      <el-card class="card3">
        <div slot="header" class="clearfix">
           <router-link :to="{path:'../ArticleManagement/ArticleType'}">文章管理</router-link>
        </div>
        <div>
          <a href="../ArticleManagement/ArticleType"><img :src="artile" alt="" /></a>
          
        </div>
      </el-card>
      <el-card class="card4">
        <div slot="header" class="clearfix">
  
           <router-link :to="{path:'../WebsiteManagement/RotationChart'}">网站管理</router-link>
        </div>
        <div>
          <a href="../WebsiteManagement/RotationChart"> <img :src="web" alt="" /></a>
         
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
       user:require("../img/Users.png"),
       admin:require("../img/Admin.png"),
        artile:require("../img/Article.png"),
        web:require("../img/Web.png")
    };
  },
};
</script>

<style scoped>
a {
  text-decoration:none;
}
img{
  transform:rotate(90deg);
}

.clearfix {
  text-align: center;
    transform:rotate(90deg);
    margin: 0 auto;  
    writing-mode:vertical-lr;
    widows: 70px;
    height: 80px;
}
.el-card {
  width: 260px;
}

.box-card {
  display: flex;
  justify-content: center;
}
.card1{
    transform:rotate(-90deg);
}
.card2 {
  margin-left:10rem;
    transform:rotate(-90deg);
}
.card3{
    transform:rotate(-90deg);
}
.card4 {
  margin-left:10rem;
    transform:rotate(-90deg);
}
</style>